class UI { 
    constructor(game){ 
        this.game =game
        const playBtn =  document.getElementById('playBtn') ;
        playBtn.addEventListener('pointerdown',this.playBtnPressed )
        this.playBtn = playBtn
    }
    set visible(value){
        if(!this.ui){ 
            this.ui= document.getElementById('ui') ;
        }
        const   ui  = this.ui ;

        const display  = value ? 'block': 'none' ;
        this.playBtn.style.display = display ;
        ui.style.display = display ;
     }

     playBtnPressed =()=>{ 
        this.playBtn.style.display = 'none' ;
        const img   = this.playBtn.getElementsByTagName('img')[0];
        img.src = '/assets/factory/playagain.png'; // 这个路径应该是相对于根目录的
        this.game.startGame()
     }

     showGameover(){ 
        const gameover = document.getElementById('gameover') ;
        gameover.style.display = 'block';
       const id = setTimeout(()=> { 
            gameover.style.display = 'none' ;
            this.playBtn.style.display ='block'
            clearTimeout(id);
        })

     }

     set ammo(value){ 
        if(!this.ammoBar){ 
            this.ammoBar = document.getElementById('ammoBar') ;
        }
        const percent = `${value*100}%`
        this.ammoBar.style.width = percent ;
    }

    set health(value){ 
        
        if(!this.healthBar){ 
            this.healthBar = document.getElementById('healthBar') ;
        }
        const percent = `${value*100}%`
        this.healthBar.style.width = percent ;
    }
}

export {UI}